<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结算 - HUAWEI Global Store</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #f8fafc;
            color: #1f2937;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header */
        .header {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            color: white;
            padding: 15px 0;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 28px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }

        .logo::before {
            content: "🌐";
            font-size: 24px;
        }

        .checkout-progress {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .progress-step {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }

        .progress-step.active {
            background: rgba(255,255,255,0.2);
        }

        .progress-step.completed {
            background: rgba(16,185,129,0.2);
            color: #d1fae5;
        }

        .step-separator {
            color: rgba(255,255,255,0.5);
        }

        /* Breadcrumb */
        .breadcrumb {
            background: white;
            padding: 15px 0;
            border-bottom: 1px solid #e5e7eb;
        }

        .breadcrumb-list {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
        }

        .breadcrumb-list a {
            color: #6b7280;
            text-decoration: none;
        }

        .breadcrumb-list a:hover {
            color: #3b82f6;
        }

        .breadcrumb-separator {
            color: #9ca3af;
        }

        /* Checkout Page */
        .checkout-page {
            padding: 40px 0;
        }

        .page-title {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 30px;
            color: #1f2937;
        }

        .checkout-container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 40px;
        }

        /* Checkout Form */
        .checkout-form {
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            overflow: hidden;
        }

        .form-section {
            padding: 30px;
            border-bottom: 1px solid #f3f4f6;
        }

        .form-section:last-child {
            border-bottom: none;
        }

        .form-section h3 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 20px;
            color: #1f2937;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .section-icon {
            font-size: 24px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #374151;
        }

        .required::after {
            content: "*";
            color: #ef4444;
            margin-left: 4px;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s ease;
            background: white;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .form-row-3 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
        }

        /* Address Selection */
        .address-options {
            display: grid;
            gap: 15px;
            margin-bottom: 20px;
        }

        .address-option {
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .address-option:hover,
        .address-option.selected {
            border-color: #3b82f6;
            background: #eff6ff;
        }

        .address-option.selected::after {
            content: "✓";
            position: absolute;
            top: 15px;
            right: 15px;
            background: #3b82f6;
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .address-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 10px;
        }

        .address-name {
            font-weight: 600;
            color: #1f2937;
        }

        .address-phone {
            color: #6b7280;
            font-size: 14px;
        }

        .address-details {
            color: #4b5563;
            line-height: 1.5;
        }

        .address-actions {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .address-action-btn {
            padding: 6px 12px;
            border: 1px solid #d1d5db;
            background: white;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .address-action-btn:hover {
            background: #f3f4f6;
        }

        .add-address-btn {
            border: 2px dashed #d1d5db;
            border-radius: 10px;
            padding: 40px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #6b7280;
        }

        .add-address-btn:hover {
            border-color: #3b82f6;
            color: #3b82f6;
        }

        /* New Address Form */
        .new-address-form {
            display: none;
            border: 2px solid #3b82f6;
            border-radius: 10px;
            padding: 20px;
            background: #eff6ff;
        }

        .new-address-form.show {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        /* Delivery Options */
        .delivery-options {
            display: grid;
            gap: 15px;
        }

        .delivery-option {
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .delivery-option:hover,
        .delivery-option.selected {
            border-color: #3b82f6;
            background: #eff6ff;
        }

        .delivery-info {
            flex: 1;
        }

        .delivery-name {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .delivery-desc {
            color: #6b7280;
            font-size: 14px;
        }

        .delivery-time {
            color: #059669;
            font-size: 12px;
            font-weight: 500;
            margin-top: 5px;
        }

        .delivery-price {
            font-size: 18px;
            font-weight: bold;
            color: #3b82f6;
        }

        .delivery-free {
            color: #10b981;
        }

        /* Payment Methods */
        .payment-methods {
            display: grid;
            gap: 15px;
        }

        .payment-method {
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .payment-method:hover,
        .payment-method.selected {
            border-color: #3b82f6;
            background: #eff6ff;
        }

        .payment-method input[type="radio"] {
            width: 18px;
            height: 18px;
            margin: 0;
        }

        .payment-icon {
            font-size: 28px;
            min-width: 40px;
        }

        .payment-info {
            flex: 1;
        }

        .payment-name {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .payment-desc {
            color: #6b7280;
            font-size: 14px;
        }

        .payment-discount {
            color: #dc2626;
            font-size: 12px;
            font-weight: 500;
            margin-top: 5px;
        }

        .payment-badge {
            background: #fef3c7;
            color: #92400e;
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: 500;
        }

        /* Coupon Section */
        .coupon-section {
            background: #f8fafc;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
        }

        .coupon-input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .coupon-input {
            flex: 1;
            padding: 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
        }

        .coupon-btn {
            padding: 12px 20px;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            white-space: nowrap;
        }

        .coupon-btn:hover {
            background: #2563eb;
        }

        .coupon-btn:disabled {
            background: #9ca3af;
            cursor: not-allowed;
        }

        .available-coupons {
            display: grid;
            gap: 10px;
        }

        .coupon-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .coupon-item:hover {
            border-color: #3b82f6;
        }

        .coupon-item.selected {
            border-color: #3b82f6;
            background: #eff6ff;
        }

        .coupon-info {
            flex: 1;
        }

        .coupon-name {
            font-weight: 600;
            font-size: 14px;
        }

        .coupon-desc {
            color: #6b7280;
            font-size: 12px;
        }

        .coupon-value {
            color: #dc2626;
            font-weight: bold;
        }

        /* Invoice Section */
        .invoice-options {
            display: grid;
            gap: 15px;
        }

        .invoice-option {
            border: 1px solid #d1d5db;
            border-radius: 8px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .invoice-option:hover,
        .invoice-option.selected {
            border-color: #3b82f6;
            background: #eff6ff;
        }

        .invoice-details {
            display: none;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #e5e7eb;
        }

        .invoice-option.selected .invoice-details {
            display: block;
        }

        /* Order Summary */
        .order-summary {
            background: white;
            border-radius: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            padding: 30px;
            height: fit-content;
            position: sticky;
            top: 20px;
        }

        .summary-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 25px;
            color: #1f2937;
        }

        .order-items {
            margin-bottom: 25px;
        }

        .order-item {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            padding: 15px;
            background: #f8fafc;
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .order-item:hover {
            background: #f1f5f9;
        }

        .order-item:last-child {
            margin-bottom: 0;
        }

        .item-image {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .item-details {
            flex: 1;
        }

        .item-name {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 14px;
        }

        .item-specs {
            color: #6b7280;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .item-quantity-price {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }

        .item-original-price {
            text-decoration: line-through;
            color: #9ca3af;
            font-size: 12px;
        }

        .summary-rows {
            border-top: 1px solid #f3f4f6;
            padding-top: 20px;
            margin-bottom: 25px;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            color: #6b7280;
        }

        .summary-row.total {
            font-size: 20px;
            font-weight: bold;
            color: #1f2937;
            border-top: 2px solid #f3f4f6;
            padding-top: 15px;
            margin-top: 15px;
        }

        .savings {
            color: #10b981;
            font-weight: 600;
        }

        .estimated-points {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            background: #fef3c7;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .points-icon {
            font-size: 18px;
        }

        .points-text {
            color: #92400e;
            font-size: 14px;
        }

        /* Security Info */
        .security-info {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: #f0f9f4;
            border-radius: 10px;
            margin-bottom: 25px;
            font-size: 14px;
        }

        .security-icon {
            font-size: 20px;
            color: #10b981;
        }

        .security-text {
            color: #047857;
        }

        /* Buttons */
        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            color: white;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #1d4ed8, #1e40af);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
        }

        .btn-primary:disabled {
            background: #9ca3af;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .btn-outline {
            background: white;
            border: 2px solid #3b82f6;
            color: #3b82f6;
        }

        .btn-outline:hover {
            background: #3b82f6;
            color: white;
        }

        .btn-full {
            width: 100%;
        }

        .btn-large {
            padding: 18px 40px;
            font-size: 18px;
        }

        .btn-small {
            padding: 8px 16px;
            font-size: 14px;
        }

        /* Order Actions */
        .order-actions {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }

        /* Loading State */
        .processing {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }

        .processing.show {
            display: flex;
        }

        .processing-content {
            background: white;
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            max-width: 400px;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #f3f4f6;
            border-top: 4px solid #3b82f6;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Notification */
        .notification {
            position: fixed;
            top: 100px;
            right: 20px;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            z-index: 3000;
            animation: slideInRight 0.3s ease;
            min-width: 250px;
            max-width: 400px;
        }

        .notification.error {
            border-left: 4px solid #ef4444;
        }

        .notification.success {
            border-left: 4px solid #10b981;
        }

        .notification.warning {
            border-left: 4px solid #f59e0b;
        }

        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .checkout-container {
                grid-template-columns: 1fr;
            }

            .form-row,
            .form-row-3 {
                grid-template-columns: 1fr;
            }

            .checkout-progress {
                display: none;
            }

            .order-actions {
                flex-direction: column;
            }

            .page-title {
                font-size: 24px;
            }

            .form-section {
                padding: 20px;
            }

            .order-summary {
                padding: 20px;
                position: static;
            }

            .coupon-input-group {
                flex-direction: column;
            }
        }

        /* Animations */
        .fade-in {
            animation: fadeIn 0.6s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Form Validation */
        .form-group.error input,
        .form-group.error select,
        .form-group.error textarea {
            border-color: #ef4444;
            background-color: #fef2f2;
        }

        .error-message {
            color: #ef4444;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }

        .form-group.error .error-message {
            display: block;
        }

        .form-group.success input,
        .form-group.success select {
            border-color: #10b981;
        }

        /* Timer Discount */
        .timer-discount {
            background: linear-gradient(135deg, #dc2626, #ef4444);
            color: white;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 20px;
            animation: pulse 2s infinite;
        }

        .timer-text {
            font-size: 14px;
            margin-bottom: 5px;
        }

        .timer-countdown {
            font-size: 18px;
            font-weight: bold;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }

        /* Stock Warning */
        .stock-warning {
            background: #fef3c7;
            color: #92400e;
            padding: 12px;
            border-radius: 8px;
            font-size: 14px;
            margin: 10px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .stock-warning-icon {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo" onclick="window.location.href='index.html'">HUAWEI Global Store</div>
                <div class="checkout-progress">
                    <div class="progress-step completed">
                        <span>🛒</span>
                        <span>购物车</span>
                    </div>
                    <span class="step-separator">→</span>
                    <div class="progress-step active">
                        <span>📋</span>
                        <span>结算</span>
                    </div>
                    <span class="step-separator">→</span>
                    <div class="progress-step">
                        <span>💳</span>
                        <span>支付</span>
                    </div>
                    <span class="step-separator">→</span>
                    <div class="progress-step">
                        <span>✅</span>
                        <span>完成</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Breadcrumb -->
    <nav class="breadcrumb">
        <div class="container">
            <div class="breadcrumb-list">
                <a href="index.html">首页</a>
                <span class="breadcrumb-separator">></span>
                <a href="cart.html">购物车</a>
                <span class="breadcrumb-separator">></span>
                <span>结算</span>
            </div>
        </div>
    </nav>

    <!-- Checkout Page -->
    <section class="checkout-page">
        <div class="container">
            <h1 class="page-title fade-in">结算</h1>
            
            <div class="checkout-container">
                <!-- Checkout Form -->
                <div class="checkout-form fade-in">
                    <!-- Timer Discount -->
                    <div class="timer-discount" id="timerDiscount">
                        <div class="timer-text">限时优惠还剩</div>
                        <div class="timer-countdown" id="countdown">29:59</div>
                        <div style="font-size: 12px; margin-top: 5px;">立即下单享受额外优惠</div>
                    </div>

                    <!-- Shipping Address -->
                    <div class="form-section">
                        <h3>
                            <span class="section-icon">📍</span>
                            收货地址
                        </h3>
                        
                        <div class="address-options" id="addressOptions">
                            <div class="address-option selected" onclick="selectAddress(0)">
                                <div class="address-header">
                                    <div>
                                        <div class="address-name">张三</div>
                                        <div class="address-phone">138****8888</div>
                                    </div>
                                </div>
                                <div class="address-details">
                                    广东省深圳市南山区科技园南区深南大道10000号腾讯大厦A座1101室
                                </div>
                                <div class="address-actions">
                                    <button class="address-action-btn" onclick="editAddress(0, event)">编辑</button>
                                    <button class="address-action-btn" onclick="deleteAddress(0, event)">删除</button>
                                </div>
                            </div>
                            
                            <div class="address-option" onclick="selectAddress(1)">
                                <div class="address-header">
                                    <div>
                                        <div class="address-name">李四</div>
                                        <div class="address-phone">139****9999</div>
                                    </div>
                                </div>
                                <div class="address-details">
                                    北京市海淀区中关村大街1号中关村广场A座2001室
                                </div>
                                <div class="address-actions">
                                    <button class="address-action-btn" onclick="editAddress(1, event)">编辑</button>
                                    <button class="address-action-btn" onclick="deleteAddress(1, event)">删除</button>
                                </div>
                            </div>
                            
                            <div class="add-address-btn" onclick="toggleNewAddressForm()">
                                <div style="font-size: 24px; margin-bottom: 10px;">➕</div>
                                <div>添加新地址</div>
                            </div>
                        </div>

                        <!-- New Address Form -->
                        <div class="new-address-form" id="newAddressForm">
                            <h4 style="margin-bottom: 20px; color: #1f2937;">添加新地址</h4>
                            <div class="form-row">
                                <div class="form-group">
                                    <label class="required">收货人姓名</label>
                                    <input type="text" id="newName" placeholder="请输入收货人姓名" required>
                                    <div class="error-message">请输入收货人姓名</div>
                                </div>
                                <div class="form-group">
                                    <label class="required">联系电话</label>
                                    <input type="tel" id="newPhone" placeholder="请输入11位手机号码" required>
                                    <div class="error-message">请输入正确的手机号码</div>
                                </div>
                            </div>
                            <div class="form-row-3">
                                <div class="form-group">
                                    <label class="required">省份</label>
                                    <select id="newProvince" required>
                                        <option value="">请选择省份</option>
                                        <option value="广东省">广东省</option>
                                        <option value="北京市">北京市</option>
                                        <option value="上海市">上海市</option>
                                        <option value="浙江省">浙江省</option>
                                        <option value="江苏省">江苏省</option>
                                    </select>
                                    <div class="error-message">请选择省份</div>
                                </div>
                                <div class="form-group">
                                    <label class="required">城市</label>
                                    <select id="newCity" required>
                                        <option value="">请选择城市</option>
                                    </select>
                                    <div class="error-message">请选择城市</div>
                                </div>
                                <div class="form-group">
                                    <label class="required">区县</label>
                                    <select id="newDistrict" required>
                                        <option value="">请选择区县</option>
                                    </select>
                                    <div class="error-message">请选择区县</div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="required">详细地址</label>
                                <textarea id="newAddress" placeholder="请输入详细地址（街道、门牌号等）" rows="3" required></textarea>
                                <div class="error-message">请输入详细地址</div>
                            </div>
                            <div style="display: flex; gap: 10px; margin-top: 20px;">
                                <button type="button" class="btn btn-outline" onclick="cancelNewAddress()">取消</button>
                                <button type="button" class="btn btn-primary" onclick="saveNewAddress()">保存地址</button>
                            </div>
                        </div>
                    </div>

                    <!-- Delivery Options -->
                    <div class="form-section">
                        <h3>
                            <span class="section-icon">🚚</span>
                            配送方式
                        </h3>
                        
                        <div class="delivery-options">
                            <div class="delivery-option selected" onclick="selectDelivery(this, 0)">
                                <div class="delivery-info">
                                    <div class="delivery-name">顺丰速运</div>
                                    <div class="delivery-desc">1-2个工作日送达，支持工作日指定时间配送</div>
                                    <div class="delivery-time">预计明天 16:00-18:00 送达</div>
                                </div>
                                <div class="delivery-price delivery-free">免运费</div>
                            </div>
                            
                            <div class="delivery-option" onclick="selectDelivery(this, 15)">
                                <div class="delivery-info">
                                    <div class="delivery-name">京东物流</div>
                                    <div class="delivery-desc">当日达/次日达，支持夜间配送</div>
                                    <div class="delivery-time">今日 20:00-22:00 可送达</div>
                                </div>
                                <div class="delivery-price">¥15</div>
                            </div>
                            
                            <div class="delivery-option" onclick="selectDelivery(this, 0)">
                                <div class="delivery-info">
                                    <div class="delivery-name">华为自营配送</div>
                                    <div class="delivery-desc">专业工程师送货上门并协助设置</div>
                                    <div class="delivery-time">48小时内预约上门服务</div>
                                </div>
                                <div class="delivery-price delivery-free">免运费</div>
                            </div>
                        </div>
                    </div>

                    <!-- Coupons Section -->
                    <div class="form-section">
                        <h3>
                            <span class="section-icon">🎫</span>
                            优惠券
                        </h3>
                        
                        <div class="coupon-section">
                            <div class="coupon-input-group">
                                <input type="text" class="coupon-input" id="couponCode" placeholder="请输入优惠券代码">
                                <button class="coupon-btn" onclick="applyCoupon()" id="applyCouponBtn">使用</button>
                            </div>
                            
                            <div>
                                <h4 style="margin-bottom: 15px; color: #1f2937; font-size: 16px;">可用优惠券</h4>
                                <div class="available-coupons" id="availableCoupons">
                                    <div class="coupon-item" onclick="selectCoupon(this, 'WELCOME100', 100)">
                                        <div class="coupon-info">
                                            <div class="coupon-name">新用户专享券</div>
                                            <div class="coupon-desc">满5000元可用，有效期至2025-12-31</div>
                                        </div>
                                        <div class="coupon-value">-¥100</div>
                                    </div>
                                    
                                    <div class="coupon-item" onclick="selectCoupon(this, 'SAVE200', 200)">
                                        <div class="coupon-info">
                                            <div class="coupon-name">品类优惠券</div>
                                            <div class="coupon-desc">手机品类满8000元可用</div>
                                        </div>
                                        <div class="coupon-value">-¥200</div>
                                    </div>
                                    
                                    <div class="coupon-item" onclick="selectCoupon(this, 'VIP300', 300)">
                                        <div class="coupon-info">
                                            <div class="coupon-name">会员专享券</div>
                                            <div class="coupon-desc">满10000元可用，不与其他优惠同享</div>
                                        </div>
                                        <div class="coupon-value">-¥300</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Payment Method -->
                    <div class="form-section">
                        <h3>
                            <span class="section-icon">💳</span>
                            支付方式
                        </h3>
                        
                        <div class="payment-methods">
                            <div class="payment-method selected" onclick="selectPayment(this)">
                                <input type="radio" name="payment" value="wechat" checked>
                                <div class="payment-icon">💚</div>
                                <div class="payment-info">
                                    <div class="payment-name">微信支付</div>
                                    <div class="payment-desc">安全快捷的移动支付方式</div>
                                    <div class="payment-discount">使用微信支付享受9.5折优惠</div>
                                </div>
                                <div class="payment-badge">推荐</div>
                            </div>
                            
                            <div class="payment-method" onclick="selectPayment(this)">
                                <input type="radio" name="payment" value="alipay">
                                <div class="payment-icon">🔵</div>
                                <div class="payment-info">
                                    <div class="payment-name">支付宝</div>
                                    <div class="payment-desc">支持花呗分期付款</div>
                                    <div class="payment-discount">支持3/6/12期免息分期</div>
                                </div>
                            </div>
                            
                            <div class="payment-method" onclick="selectPayment(this)">
                                <input type="radio" name="payment" value="credit">
                                <div class="payment-icon">💳</div>
                                <div class="payment-info">
                                    <div class="payment-name">信用卡/借记卡</div>
                                    <div class="payment-desc">支持Visa、MasterCard、银联</div>
                                </div>
                            </div>
                            
                            <div class="payment-method" onclick="selectPayment(this)">
                                <input type="radio" name="payment" value="huawei_pay">
                                <div class="payment-icon">🏢</div>
                                <div class="payment-info">
                                    <div class="payment-name">华为钱包</div>
                                    <div class="payment-desc">华为生态专属支付方式</div>
                                    <div class="payment-discount">使用华为钱包额外获得2%积分</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Invoice Section -->
                    <div class="form-section">
                        <h3>
                            <span class="section-icon">📄</span>
                            发票信息
                        </h3>
                        
                        <div class="invoice-options">
                            <div class="invoice-option selected" onclick="selectInvoice(this, 'none')">
                                <label style="cursor: pointer;">
                                    <input type="radio" name="invoice" value="none" checked style="margin-right: 10px;">
                                    不开发票
                                </label>
                            </div>
                            
                            <div class="invoice-option" onclick="selectInvoice(this, 'personal')">
                                <label style="cursor: pointer;">
                                    <input type="radio" name="invoice" value="personal" style="margin-right: 10px;">
                                    个人发票
                                </label>
                                <div class="invoice-details">
                                    <div class="form-group">
                                        <label>发票抬头</label>
                                        <input type="text" placeholder="请输入个人姓名" id="personalInvoiceTitle">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="invoice-option" onclick="selectInvoice(this, 'company')">
                                <label style="cursor: pointer;">
                                    <input type="radio" name="invoice" value="company" style="margin-right: 10px;">
                                    企业发票
                                </label>
                                <div class="invoice-details">
                                    <div class="form-row">
                                        <div class="form-group">
                                            <label class="required">企业名称</label>
                                            <input type="text" placeholder="请输入企业全称" id="companyName">
                                        </div>
                                        <div class="form-group">
                                            <label class="required">税号</label>
                                            <input type="text" placeholder="请输入统一社会信用代码" id="taxNumber">
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group">
                                            <label>注册地址</label>
                                            <input type="text" placeholder="请输入注册地址（可选）" id="companyAddress">
                                        </div>
                                        <div class="form-group">
                                            <label>联系电话</label>
                                            <input type="tel" placeholder="请输入联系电话（可选）" id="companyPhone">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Order Notes -->
                    <div class="form-section">
                        <h3>
                            <span class="section-icon">📝</span>
                            订单备注
                        </h3>
                        
                        <div class="form-group">
                            <textarea placeholder="如有特殊要求，请在此填写（选填）" rows="4" id="orderNotes" maxlength="200"></textarea>
                            <div style="text-align: right; font-size: 12px; color: #9ca3af; margin-top: 5px;">
                                <span id="notesCount">0</span>/200
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Order Summary -->
                <div class="order-summary fade-in">
                    <h3 class="summary-title">订单摘要</h3>
                    
                    <div class="order-items" id="orderItems">
                        <!-- 商品列表将通过JavaScript动态加载 -->
                    </div>
                    
                    <div class="estimated-points">
                        <span class="points-icon">⭐</span>
                        <div class="points-text">
                            <strong>预计获得积分：</strong><span id="estimatedPoints">940</span>分
                        </div>
                    </div>
                    
                    <div class="summary-rows">
                        <div class="summary-row">
                            <span>商品小计:</span>
                            <span id="subtotal">¥9,798</span>
                        </div>
                        <div class="summary-row">
                            <span>运费:</span>
                            <span id="shippingFee">免运费</span>
                        </div>
                        <div class="summary-row" id="couponDiscountRow" style="display: none;">
                            <span>优惠券:</span>
                            <span class="savings" id="couponDiscount">-¥0</span>
                        </div>
                        <div class="summary-row">
                            <span>活动优惠:</span>
                            <span class="savings" id="discount">-¥400</span>
                        </div>
                        <div class="summary-row" id="paymentDiscountRow" style="display: none;">
                            <span>支付优惠:</span>
                            <span class="savings" id="paymentDiscount">-¥0</span>
                        </div>
                        <div class="summary-row total">
                            <span>应付总额:</span>
                            <span id="totalAmount">¥9,398</span>
                        </div>
                    </div>
                    
                    <div class="security-info">
                        <div class="security-icon">🔒</div>
                        <div class="security-text">
                            您的支付信息将通过256位SSL加密传输，绝对安全
                        </div>
                    </div>
                    
                    <div class="order-actions">
                        <button class="btn btn-outline" onclick="window.location.href='cart.html'">
                            返回购物车
                        </button>
                        <button class="btn btn-primary btn-large btn-full" onclick="submitOrder()" id="submitBtn">
                            <span id="submitText">确认下单</span>
                            <span id="submitAmount">¥9,398</span>
                        </button>
                    </div>
                    
                    <div style="text-align: center; margin-top: 20px; font-size: 14px; color: #6b7280;">
                        点击"确认下单"表示您同意
                        <a href="#" style="color: #3b82f6;">《服务条款》</a>和
                        <a href="#" style="color: #3b82f6;">《隐私政策》</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Processing Modal -->
    <div class="processing" id="processingModal">
        <div class="processing-content">
            <div class="loading-spinner"></div>
            <h3>正在处理您的订单...</h3>
            <p id="processingText">请稍候，不要关闭页面</p>
            <div style="margin-top: 20px;">
                <div style="width: 100%; background: #f3f4f6; border-radius: 10px; height: 8px;">
                    <div id="processingProgress" style="width: 0%; background: #3b82f6; border-radius: 10px; height: 100%; transition: width 0.5s;"></div>
                </div>
                <div id="processingStep" style="margin-top: 10px; font-size: 14px; color: #6b7280;">正在验证订单信息...</div>
            </div>
        </div>
    </div>

    <script>
        let selectedAddressIndex = 0;
        let selectedDeliveryFee = 0;
        let selectedCouponDiscount = 0;
        let selectedPaymentDiscount = 0;
        let orderItems = [];
        let countdownTimer;
        let processingSteps = [
            '正在验证订单信息...',
            '正在检查库存...',
            '正在计算优惠...',
            '正在生成订单...',
            '正在跳转支付页面...'
        ];

        // 地址数据
        const addressData = {
            '广东省': ['深圳市', '广州市', '东莞市', '佛山市'],
            '北京市': ['东城区', '西城区', '朝阳区', '海淀区'],
            '上海市': ['浦东新区', '徐汇区', '静安区', '黄浦区'],
            '浙江省': ['杭州市', '宁波市', '温州市', '嘉兴市'],
            '江苏省': ['南京市', '苏州市', '无锡市', '常州市']
        };

        const districtData = {
            '深圳市': ['南山区', '福田区', '罗湖区', '宝安区'],
            '广州市': ['天河区', '海珠区', '越秀区', '荔湾区'],
            '东城区': ['东华门街道', '景山街道', '交道口街道'],
            '西城区': ['西长安街街道', '新街口街道', '月坛街道'],
            '朝阳区': ['建国门外街道', '朝外街道', '呼家楼街道'],
            '海淀区': ['万寿路街道', '永定路街道', '羊坊店街道']
        };

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadOrderItems();
            updateOrderSummary();
            startCountdown(30 * 60); // 30分钟倒计时
            initializeEventListeners();
            
            // 恢复草稿
            restoreDraft();
            
            // 检查库存
            checkStock();
        });

        // 初始化事件监听器
        function initializeEventListeners() {
            // 省份选择
            document.getElementById('newProvince').addEventListener('change', function() {
                updateCityOptions(this.value);
            });
            
            // 城市选择
            document.getElementById('newCity').addEventListener('change', function() {
                updateDistrictOptions(this.value);
            });
            
            // 备注字数统计
            document.getElementById('orderNotes').addEventListener('input', function() {
                document.getElementById('notesCount').textContent = this.value.length;
            });
            
            // 实时表单验证
            const inputs = document.querySelectorAll('input, select, textarea');
            inputs.forEach(input => {
                input.addEventListener('blur', () => validateField(input));
                input.addEventListener('input', () => {
                    if (input.classList.contains('error')) {
                        validateField(input);
                    }
                });
            });
        }

        // 更新城市选项
        function updateCityOptions(province) {
            const citySelect = document.getElementById('newCity');
            const districtSelect = document.getElementById('newDistrict');
            
            citySelect.innerHTML = '<option value="">请选择城市</option>';
            districtSelect.innerHTML = '<option value="">请选择区县</option>';
            
            if (addressData[province]) {
                addressData[province].forEach(city => {
                    const option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    citySelect.appendChild(option);
                });
            }
        }

        // 更新区县选项
        function updateDistrictOptions(city) {
            const districtSelect = document.getElementById('newDistrict');
            districtSelect.innerHTML = '<option value="">请选择区县</option>';
            
            if (districtData[city]) {
                districtData[city].forEach(district => {
                    const option = document.createElement('option');
                    option.value = district;
                    option.textContent = district;
                    districtSelect.appendChild(option);
                });
            }
        }

        // 开始倒计时
        function startCountdown(seconds) {
            let timeLeft = seconds;
            
            countdownTimer = setInterval(function() {
                const minutes = Math.floor(timeLeft / 60);
                const secs = timeLeft % 60;
                
                document.getElementById('countdown').textContent = 
                    `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
                
                if (timeLeft <= 0) {
                    clearInterval(countdownTimer);
                    document.getElementById('timerDiscount').style.display = 'none';
                    showNotification('限时优惠已结束', 'warning');
                }
                
                timeLeft--;
            }, 1000);
        }

        // 检查库存
        function checkStock() {
            // 模拟库存检查
            setTimeout(() => {
                const stockItems = document.querySelectorAll('.order-item');
                stockItems.forEach((item, index) => {
                    if (index === 1) { // 模拟第二个商品库存紧张
                        const warning = document.createElement('div');
                        warning.className = 'stock-warning';
                        warning.innerHTML = `
                            <span class="stock-warning-icon">⚠️</span>
                            <span>该商品库存紧张，仅剩3件，请尽快下单</span>
                        `;
                        item.appendChild(warning);
                    }
                });
            }, 2000);
        }

        // 加载订单商品
        function loadOrderItems() {
            const checkoutItems = localStorage.getItem('checkoutItems');
            if (checkoutItems) {
                orderItems = JSON.parse(checkoutItems);
            } else {
                orderItems = [
                    {
                        id: 1,
                        name: '华为Mate 70 Pro',
                        storage: '512GB',
                        color: '雅黑',
                        price: 7599,
                        originalPrice: 7999,
                        quantity: 1,
                        image: '📱',
                        stock: 50
                    },
                    {
                        id: 2,
                        name: '华为WATCH GT 5',
                        storage: '46mm',
                        color: '星河银',
                        price: 2199,
                        originalPrice: 2399,
                        quantity: 1,
                        image: '⌚',
                        stock: 3
                    }
                ];
            }

            const orderItemsContainer = document.getElementById('orderItems');
            orderItemsContainer.innerHTML = '';

            orderItems.forEach(item => {
                const orderItem = document.createElement('div');
                orderItem.className = 'order-item';
                orderItem.innerHTML = `
                    <div class="item-image">${item.image}</div>
                    <div class="item-details">
                        <div class="item-name">${item.name}</div>
                        <div class="item-specs">${item.storage} · ${item.color}</div>
                        <div class="item-quantity-price">
                            <span>×${item.quantity}</span>
                            <div>
                                ${item.originalPrice && item.originalPrice > item.price ? 
                                    `<span class="item-original-price">¥${item.originalPrice.toLocaleString()}</span><br>` : ''
                                }
                                <span style="color: #3b82f6; font-weight: 600;">¥${item.price.toLocaleString()}</span>
                            </div>
                        </div>
                    </div>
                `;
                orderItemsContainer.appendChild(orderItem);
            });
        }

        // 选择地址
        function selectAddress(index) {
            selectedAddressIndex = index;
            
            document.querySelectorAll('.address-option:not(.add-address-btn)').forEach(option => {
                option.classList.remove('selected');
            });
            document.querySelectorAll('.address-option:not(.add-address-btn)')[index].classList.add('selected');
        }

        // 编辑地址
        function editAddress(index, event) {
            event.stopPropagation();
            showNotification('编辑地址功能开发中...', 'info');
        }

        // 删除地址
        function deleteAddress(index, event) {
            event.stopPropagation();
            if (confirm('确定要删除这个地址吗？')) {
                showNotification('地址删除成功', 'success');
                // 实际项目中这里会发送删除请求
            }
        }

        // 切换新地址表单
        function toggleNewAddressForm() {
            const form = document.getElementById('newAddressForm');
            form.classList.toggle('show');
            
            if (form.classList.contains('show')) {
                document.querySelector('.add-address-btn div:last-child').textContent = '取消添加';
            } else {
                document.querySelector('.add-address-btn div:last-child').textContent = '添加新地址';
                resetNewAddressForm();
            }
        }

        // 取消新地址
        function cancelNewAddress() {
            toggleNewAddressForm();
        }

        // 保存新地址
        function saveNewAddress() {
            const name = document.getElementById('newName').value.trim();
            const phone = document.getElementById('newPhone').value.trim();
            const province = document.getElementById('newProvince').value;
            const city = document.getElementById('newCity').value;
            const district = document.getElementById('newDistrict').value;
            const address = document.getElementById('newAddress').value.trim();

            // 验证表单
            const fields = [
                { id: 'newName', value: name, message: '请输入收货人姓名' },
                { id: 'newPhone', value: phone, message: '请输入正确的手机号码', pattern: /^1[3-9]\d{9}$/ },
                { id: 'newProvince', value: province, message: '请选择省份' },
                { id: 'newCity', value: city, message: '请选择城市' },
                { id: 'newDistrict', value: district, message: '请选择区县' },
                { id: 'newAddress', value: address, message: '请输入详细地址' }
            ];

            let isValid = true;
            fields.forEach(field => {
                const element = document.getElementById(field.id);
                const formGroup = element.closest('.form-group');
                
                if (!field.value || (field.pattern && !field.pattern.test(field.value))) {
                    formGroup.classList.add('error');
                    isValid = false;
                } else {
                    formGroup.classList.remove('error');
                }
            });

            if (!isValid) {
                showNotification('请正确填写地址信息', 'error');
                return;
            }

            // 模拟保存地址
            showNotification('地址保存成功', 'success');
            
            // 实际项目中这里会发送保存请求
            toggleNewAddressForm();
        }

        // 重置新地址表单
        function resetNewAddressForm() {
            document.getElementById('newName').value = '';
            document.getElementById('newPhone').value = '';
            document.getElementById('newProvince').value = '';
            document.getElementById('newCity').innerHTML = '<option value="">请选择城市</option>';
            document.getElementById('newDistrict').innerHTML = '<option value="">请选择区县</option>';
            document.getElementById('newAddress').value = '';
            
            // 清除验证状态
            document.querySelectorAll('.new-address-form .form-group').forEach(group => {
                group.classList.remove('error', 'success');
            });
        }

        // 选择配送方式
        function selectDelivery(element, fee) {
            selectedDeliveryFee = fee;
            
            document.querySelectorAll('.delivery-option').forEach(option => {
                option.classList.remove('selected');
            });
            element.classList.add('selected');
            
            updateOrderSummary();
        }

        // 应用优惠券
        function applyCoupon() {
            const couponCode = document.getElementById('couponCode').value.trim().toUpperCase();
            const btn = document.getElementById('applyCouponBtn');
            
            if (!couponCode) {
                showNotification('请输入优惠券代码', 'error');
                return;
            }

            btn.disabled = true;
            btn.textContent = '验证中...';

            // 模拟验证优惠券
            setTimeout(() => {
                const validCoupons = {
                    'WELCOME100': { discount: 100, name: '新用户专享券' },
                    'SAVE200': { discount: 200, name: '品类优惠券' },
                    'VIP300': { discount: 300, name: '会员专享券' },
                    'TEST50': { discount: 50, name: '测试优惠券' }
                };

                if (validCoupons[couponCode]) {
                    const coupon = validCoupons[couponCode];
                    selectedCouponDiscount = coupon.discount;